<template>
	<view style="position: relative;">
		<view class="content">
			<text class="welcome">欢迎，请登录</text>

			<view style="display: flex;flex-direction: column;align-items: center;">
				<view class="input-wrap">

					<image src="../static/login/phone.png" mode="scaleToFill"></image>

					<u-input v-model="phone" type="number" inputAlign="left" placeholder="请输入登录手机号" border="none"
						color="#131313" clearable maxlength="11">
					</u-input>
				</view>

				<u-line color="#EBEBEB" length="83%"></u-line>
			</view>

			<view style="display: flex;flex-direction: column;align-items: center;margin-top: 40upx;">
				<view class="input-wrap">

					<image src="../static/login/password.png" mode="scaleToFill"></image>


					<u-input v-model="psd" type="text" inputAlign="left" placeholder="请输入登录密码" border="none" password
						color="#131313" clearable maxlength="18">

					</u-input>
				</view>

				<u-line color="#EBEBEB" length="83%"></u-line>
			</view>

			<text @click="goForget" class="forget">忘记密码</text>

		</view>

		<view class="button" @click="confirm">
			登  录
		</view>

		<view  style="text-align: center;position: fixed;bottom: 60upx;width: 100%;">
			<text style="font-size: 24upx;color: #999;">技术支持: 深圳市行知网络科技有限公司</text>
		</view>
	</view>
</template>

<script>
	import {
		login,
		getUserInfo
	} from '@/api/user-api.js';

	export default {
		data() {
			return {
				phone: '',
				psd: '',
			}
		},
		methods: {
			goForget() {
				uni.navigateTo({
					url: '/pagesB/updatepsd/updatepsd'
				})
			},

			confirm() {

				if (!uni.$u.test.mobile(this.phone)) {
					uni.$u.toast('请输入正确的手机号')
					return false
				}

				if (uni.$u.test.isEmpty(this.psd)) {
					uni.$u.toast('请输入登录密码')
					return false
				}

				uni.showLoading({
					title: '正在登录'
				})

				login({
					phone: this.phone,
					password: this.psd,
					source: 'mobile'
				}).then(res => {

					if (!uni.$u.test.isEmpty(res.token)) {
						this.$store.commit('user/saveToken', res.token);
						uni.setStorageSync('token', res.token);

						getUserInfo().then(res1 => {
							if (!uni.$u.test.isEmpty(res1)) {
								this.$store.commit('user/saveUserInfo', res1.data);
								uni.setStorageSync('userInfo', res1.data);

							}
							uni.hideLoading()

							uni.showToast({
								icon: 'success',
								title: '登录成功'
							})

							setTimeout(() => {
								uni.navigateBack()
							}, 1000)

						}).catch(e => {
							uni.hideLoading()
							uni.navigateBack()
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.welcome {
		font-size: 40upx;
		font-weight: bold;
		color: #333;
		margin: 120upx 0 200upx 80upx;
	}

	.input-wrap {
		width: 80%;
		display: flex;
		align-self: center;
		margin: 10upx 80upx;

		image {
			width: 35upx;
			height: 40upx;
			margin: 5upx 25upx 0 0;
		}
	}

	.content {
		@include flex(column);

	}

	.forget {
		align-self: flex-end;
		margin: 18upx 60upx 0 0;
		color: #BFBFBF;
		font-size: 30upx;
	
	}


	.button {
		background-color: $green12;
		color: #FFFFFF;
		margin: 56upx 70upx 0;
		line-height: 80upx;
		font-size: 32upx;
		text-align: center;
		border-radius: 90upx;
		font-weight: bold;
	}
</style>
